<script setup>
import "@/assets/main.css";

var yiyan = ref({
  "text": null,
  "from": null,
  "from_who": null,
});
async function getHitokoto() {
  await fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      // console.log(data);
      yiyan.value.text = data.hitokoto;
      yiyan.value.from = data.from;
      yiyan.value.from_who = data.from_who;
    })
    .catch(console.error);
}


onMounted(async () => {
  await getHitokoto();
});

</script>
<template>
  <n-space vertical justify="space-around" size="large">
    <n-card title="📖 一言" class=" shadow-lg" size="small" :bordered="false"
      style=" color: white; background: rgba(125, 10, 180, 0.3); 
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
      <div class=" text-left text-lg w-full leading-normal -mb-2">『</div>
      <div class=" text-center text-2xl w-full ">{{ yiyan.text }}</div>
      <div class=" text-right text-lg w-full leading-normal -mt-2">』</div>
      <div class=" text-right text-base w-full leading-normal">—— {{ yiyan.from_who }}「{{ yiyan.from }}」</div>
    </n-card>

    <n-flex align="center" justify="space-between"  size="large">
      <n-card hoverable style="width: 280px; min-height: 150px;" class=" shadow-lg">
        <n-statistic label="🎵 本地歌曲" tabular-nums>
          <n-number-animation :from="0" :to="12039" /> 首
        </n-statistic>

        <n-statistic label="💽 占用磁盘" tabular-nums>
          <n-number-animation :from="0" :to="12039" show-separator /> MB
        </n-statistic>
      </n-card>
      <n-card :bordered="false" style="width: 280px; min-height: 150px;" class=" shadow-lg">
        aaaa
      </n-card>
      <n-card :bordered="false"  style="width: 280px; min-height: 150px;" class=" shadow-lg">
        aaaa
      </n-card>
      <n-card :bordered="false"  style="width: 280px; min-height: 150px;" class=" shadow-lg">
        aaaa
      </n-card>
      <n-card :bordered="false" style="width: 280px; min-height: 150px;" class=" shadow-lg">
        aaaa
      </n-card>
    </n-flex>
  </n-space>
</template>

<style scoped></style>
